<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌展示</title>
    <link rel="stylesheet" href="../css/elementui.css">
</head>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<body>

<div id="app">
    <el-form :inline="true">
        <el-form-item label="品牌名称">
            <el-input placeholder="品牌名称" v-model="findCondition.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌首字母">
            <el-input placeholder="品牌首字母" v-model="findCondition.letter"></el-input>
        </el-form-item>
        <el_form-item>
            <el-button type="primary" @click="changeTable">查询</el-button>
            <el-button type="primary" @click=" brand={}; dialogVisible = true">新增</el-button>
        </el_form-item>
    </el-form>

    <el-dialog
            title="产品添加"
            :visible.sync="dialogVisible"
            width="30%"
            >
          <span>
                 <!--添加表单-->
              <el-form  label-width="180px">
          <el-form-item label="品牌名称">
              <el-input placeholder="品牌名称" v-model="brand.name"></el-input>
          </el-form-item>
          <el-form-item label="图片">
             <el-upload
                    class="avatar-uploader"
                    action="/upload/native.do"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
                     <el-form-item label="品牌首字母">
              <el-input placeholder="品牌首字母" v-model="brand.letter"></el-input>
          </el-form-item>
                     <el-form-item label="排序">
              <el-input placeholder="排序" v-model="brand.seq"></el-input>
          </el-form-item>
            <el_form-item>
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button  @click="save">保存</el-button>
            </el_form-item>

      </el-form>

          </span>

    </el-dialog>

    <el-table
            :data="tableData"
            style="width: 100%"
    >
        <el-table-column
                prop="id"
                label="编号"
                width="220">
        </el-table-column>
        <el-table-column
                prop="name"
                label="名称"
                width="220">
        </el-table-column>
        <el-table-column
                prop="letter"
                label="首字母"
        >
        </el-table-column>
        <el-table-column
                label="图片"
        >

            <!--模板-->
            <template slot-scope="scope">
                <img width="100px" height="50px" :src="scope.row.image"/>
            </template>
        </el-table-column>
        <el-table-column
                label="操作"
        >
            <!--模板-->
            <template slot-scope="scope">
                <el-button type="text" @click="edit(scope.row.id)">修改</el-button>
                <el-button type="text" @click="del(scope.row.id)">删除</el-button>
            </template>

        </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
            @size-change="changeTable"
            @current-change="changeTable"
            :current-page.sync="currentPage"
            :page-sizes="[10,20,30,40]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

</div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/elementui.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            tableData: [],
            currentPage: 1,
            size: 10,
            total: 10,
            dialogVisible: false,
            brand:{},
            imageUrl:"",
            findCondition: {name: "", letter: ""}
        },

        created() {
            this.changeTable();
        },
        methods: {
             changeTable() {
                var _this = this;
                axios.post(`/brand/findPageCondition.do?page=${_this.currentPage}&size=${_this.size}`, _this.findCondition)
                    .then(response => {
                        /*返回值是用data接收的*/
                        _this.total = response.data.total;
                        _this.tableData = response.data.rows
                    })
            },
             save(){
                 /*把url封装到brand对象中*/
                   this.brand.image=this.imageUrl;
                   var _this=this;
                  axios.post(`/brand/${this.brand.id==null?"addBrand":"updateBrand"}.do`,_this.brand).then(response =>{
                      /*箭头函数继承上下文的this*/
                      _this.dialogVisible=false;
                      _this.changeTable();
                  })
             },
            edit(id){

                   this.dialogVisible=true;
                 axios.get(`/brand/findById.do?id=${id}`).then(response=>{
                           this.brand=response.data;
                           this.imageUrl=this.brand.image;
                 })
            },
              del(id){
                this.$confirm('你确定要删除此数据?, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    /*删除记录*/
                     axios.get(`/brand/deleteBrand.do?id=${id}`).then( response=>{
                            this.$alert("删除成功!");
                           this.changeTable()
                     })
                })
            },
            /*上传的方法*/
            handleAvatarSuccess(res, file) {
                this.imageUrl = file.response;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isGIF = file.type === 'image/gif';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG &&!isGIF) {
                    this.$message.error('上传头像图片只能是 JPG和GIF 格式!');
                }

                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return (isJPG ||isGIF) && isLt2M;
            }


        },
    });
</script>

</html>